<template>
  <div>
    <div class="top">
        <div @click="tocart">&lt;</div>
        <div>地址管理</div>
    </div>
    <div class="addrlist">
        <van-address-list
            :list="addresses"
            default-tag-text="默认"
            :switchable="false"
            @add="onAdd"    
            @edit="onEdit"
            >
            <template #item-bottom="item">
            <van-button class="delete" icon="delete-o" type="default" @click="removeAddr(item.id)"></van-button>
             </template>
        </van-address-list>
    </div>
    <van-dialog v-model="show" :title="title" 
    :show-confirm-button="false"
    :close-on-click-overlay="true"
    :show-cancel-button="false">
    <img src="" alt="">
    <van-address-edit
        :area-list="areaList"
        :address-info="AddressInfo"
        show-postal
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        />
    </van-dialog>

  </div>
</template>

<script>
import Vue from 'vue';
import { AddressList, Toast } from 'vant';
import { Dialog } from 'vant';
import { AddressEdit } from 'vant';
import {areaList} from '@vant/area-data';
import {saveAddr,getAddr,delAddr} from '@/request'
import {getcookie} from '@/utils/cookie'
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Dialog);
Vue.use(AddressEdit);
Vue.use(AddressList);
export default {
    data(){
        return{
            addresses:[],
            show:false,
            areaList:areaList,
            AddressInfo:{},
            title:'添加地址',
        }
    },
    methods:{
        onEdit()
        {
            this.title = '地址编辑'
            this.show = true
            this.AddressInfo = item
        },
        onAdd(){
            this.show = true
        },
        onSave(content)
        {
            var username = getcookie('username')
            content.username = username
            saveAddr(content).then(data=>{
                Toast.success(data.msg)
                this.show = false
                this.AddressInfo = {}
                this.getAddress()
            })
        
        },
        tocart()
        {
            var url = localStorage.getItem('url')
            if(url){
                localStorage.removeItem('url')
                this.$router.push(url)
            }else{
                this.$router.push('my')
            }
            
        },
        removeAddr(id)
        {
            Dialog.confirm({
                title:'删除地址',
                message:'你确定要删除吗?',
            })
            .then(()=>{
               delAddr(id).then(data=>{
                    if(data.code === 1)
                    {
                        var _this = this
                    
                    Toast.success({
                        message:data.msg,
                        onClose(){
                            _this.getAddresses()
                        }
                    })
                    }
                })
            })
            .catch(()=>{
                Toast.success('已取消')
            })
        },
        onEdit(item)
        {
            this.title = '地址编辑'
            this.show = true
            this.AddressInfo = item
        }
},
created()
{
    getAddr().then(data=>{
        this.addresses = data.data.map(item=>{
            item.address = item.province + item.city + item.country + item.addressDetail  
            return item
        })
    })
}
}
</script>

<style scoped>
    .top{
        padding: 10px 20px;
        border-bottom: 2px solid #ccc;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .top>div:first-child{
        margin-right: 20px;
        }
    .top>div:last-child{
        flex: 1;
        text-align: center;
        }
    .van-address-item
    {
        position:relative;
    }
    .delete
    {
        border:hidden; 
        position: absolute;
        right:60px;
        top:80%;
        transform: translateY(-100%);
    }
</style>